<template>
  <div class="avatar" @mouseenter="isShow=!isShow" @mouseleave="isShow=!isShow">
    <!-- @mouseenter="isShow=true" @mouseleave="isShow=false" @click="isShow=!isShow" -->
    <div>
      <!-- <nuxt-link to="javascript:void(0)"> -->
      <!-- <img :src="userInfo.image | imgResize"> -->
      <img :src="userInfo.image | avatarImg(userInfo.gender)">
      <!-- </nuxt-link> -->
      <div>{{userInfo.name}}</div>
      <span class="icon icon-font icon-xiala"></span>
    </div>
    <ul :class="isShow?'isShow':''">
      <li>
        <nuxt-link to="/user-center">会员中心</nuxt-link>
      </li>
      <li @click="signOut">退出</li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
  data () {
    return {
      isShow: false
    }
  },
  computed: {
    ...mapState({
      authInfo: 'authInfo',
      userInfo: 'userInfo'
    })
  },
  methods: {
    ...mapActions({
      cleanCache: 'signOut'
    }),
    signOut () {
      this.cleanCache()
      location.replace('/login?type=login')
    }
  }
}
</script>

<style scoped lang="scss">
.avatar {
  padding-left: 10px;
  position: relative;
  > div {
    display: flex;
    align-items: center;
    font-size: $size16;
    &:hover {
      cursor: pointer;
    }
    a {
      display: block;
      width: 32px;
      height: 32px;
    }
    img {
      width: 32px;
      height: 32px;
      border-radius: 50%;
    }
    > div {
      margin: 0 9px 0 10px;
      color: $dark;
    }
  }
  > ul {
    position: absolute;
    top: 30px;
    right: 0;
    height: 0;
    background-color: $light;
    color: $dark;
    text-align: center;
    z-index: 3;
    box-shadow: 0 1px 3px 0 $stable;
    overflow: hidden;
    transition: height 0.3s;
    &.isShow {
      height: 80px;
    }
    > li {
      line-height: 40px;
      font-size: $size16;
      padding: 0 10px;
      white-space: nowrap;
      a {
        display: block;
        &:hover {
          color: $energized;
        }
      }
      &:not(:last-child) {
        border-bottom: 1px solid $stable-ec;
      }
      &:hover{
        color: $energized;
        cursor: pointer;
      }
    }
  }
}
</style>
